<template>
  <view class="page">
    <view :style="{ height: systemBarHeight + 'rpx' }"></view>
    <view
      class="page-hd"
      :style="{ height: menuBotton.height + 'rpx', lineHeight: menuBotton.height + 'rpx', marginTop: menuBotton.top + 'rpx', marginBottom: '20rpx' }"
      >学员服务</view
    >

    <view class="swipper">
      <image src="https://cloud-minapp-46950.cloud.ifanrusercontent.com/1srqLXzz70NPfOCJ.png" alt="" />
    </view>
    <view class="notice">
      <image src="../../../static/icons/notice.svg" alt="" />
      <text class="label">通知</text>
      <view class="split"></view>
      <text class="value">护工小程序上线啦1.0上线啦！</text>
      <wd-icon name="arrow-right" size="22rpx" style="margin-left: 32rpx; color: #c7c7cc"></wd-icon>
    </view>

    <view class="nav">
      <wd-grid>
        <wd-grid-item v-for="(item, i) in navItems" :key="i" use-icon-slot :text="item.title" :class="activeNav === i ? 'active' : ''">
          <template #icon>
            <wd-icon name="keyboard-collapse" size="43rpx"></wd-icon>
            <!-- <image :src="getImageUrl('book')" style="width: 43rpx; height: 43rpx" /> -->
          </template>
        </wd-grid-item>
      </wd-grid>
    </view>

    <wd-search v-model="value" placeholder-left hide-cancel maxlength="10" class="search-wrapper" @search="search" />

    <view class="content">
      <view v-for="(item, index) in messageList" :key="index" class="list-item">
        <view class="list-item-info">
          <text>{{ item.title }}</text>
          <view class="items">
            <text>阅读1234</text>
            <text>2小时前</text>
            <text style="color: #12b858">1.0学时</text>
          </view>
        </view>
        <image :src="item.cover" />
      </view>
      <wd-loadmore :state="state" @reload="loadmore" />
    </view>
  </view>
</template>

<script setup>
import usePage from "@/hooks/usePage.js"
import useLoading from "@/hooks/useLoading.js"

const { loading, setLoading } = useLoading()

const { systemBarHeight, menuBotton } = usePage()

const navItems = ref([{
		title: '资讯快栏',
		icon: 'book',
	},
	{
		title: '福利发放',
		icon: 'book',
	},
	{
		title: '文化宣传',
		icon: 'book',
	},
	{
		title: '证明申请',
		icon: 'book',
	},
])
const activeNav = ref(0)

const messageList = ref([
  { 
    title: '养老护理员学习课程上线， 提供多套练习题，快来训练吧！',
    cover: 'https://cloud-minapp-47896.cloud.ifanrusercontent.com/1szy6CxqpwcEoLis.jpg'
  },
  { 
    title: '目前开放养老护理员题库刷题功能, 其他功能将陆续推出！',
    cover: 'https://cloud-minapp-47896.cloud.ifanrusercontent.com/1szy6BZUKqAMcHkS.jpg'
  },
  { 
    title: '护工小程序1.0版本上线啦！',
    cover: 'https://cloud-minapp-47896.cloud.ifanrusercontent.com/1szy6BiU2qvbjZ8j.jpeg'
  },
  ])
</script>

<style scoped lang="scss">
.page {
  padding: 0 24rpx;
  background-color: #f5f6fa;

  &-hd {
    // padding: 19rpx 0;
    font-family: PingFang SC;
    font-size: 36rpx;
    font-variation-settings: "opsz" auto;
    font-weight: 500;
    line-height: normal;
    color: #1a1a1a;
  }

  .swipper {
    height: 324rpx;
    margin: 0 auto;
    margin-top: 16rpx;
    border-radius: 24rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .notice {
    display: flex;
    align-items: center;
    height: 80rpx;
    padding: 0 33.67rpx;
    margin: 24rpx 0 32rpx;
    background-color: #fff;
    border-radius: 16rpx;

    img,
    image {
      width: 26rpx;
      height: 26rpx;
    }

    .label {
      margin-left: 16rpx;
      font-family: PingFang SC;
      font-size: 26rpx;
      /* 文本/正文 */
      color: #1a1a1a;
    }

    .split {
      width: 2rpx;
      height: 24rpx;
      margin: 0 24rpx;
      background-color: #ececec;
    }

    .value {
      flex: 1;
      overflow: hidden;
      font-family: PingFang SC;
      font-size: 26rpx;
      color: #8c8c8c;
      text-overflow: ellipsis;
      letter-spacing: 0em;
      white-space: nowrap;
    }
  }

  .nav {
    margin-bottom: 24rpx;

    :deep(.wd-grid) {
      display: flex;
      justify-content: space-between;

      .wd-grid-item {
        width: 164rpx !important;
        height: 128rpx;
        border-radius: 16rpx;

        &__text {
          margin-top: 10.5rpx;
          font-family: PingFang SC;
          font-size: 28rpx;
          font-weight: normal;
          line-height: normal;
          color: #1a1a1a;
        }
      }

      .active {
        .wd-grid-item__content {
          background: #12b858 !important;
        }

        .wd-grid-item__text {
          color: #fff !important;
        }

        .wd-icon {
          color: #fff !important;
        }
      }
    }
  }

  :deep(.search-wrapper) {
    height: 72rpx;
    padding: 0;
    margin-bottom: 24rpx;
    border-radius: 16rpx;

    .wd-search__input {
      background-color: #fff;

      input::placeholder {
        font-size: 28rpx;
      }
    }

    .wd-icon {
      z-index: 999;
      width: 28rpx;
      height: 28rpx;
      color: #1a1a1a;
      transform: translateY(-20rpx);
    }
  }

  .content {
    padding: 16rpx 32rpx;
    background-color: #fff;
    border-radius: 16rpx;

    .list-item {
      display: flex;
      gap: 16rpx;
      align-items: center;
      justify-content: space-between;
      padding: 16rpx 0;
      border-color: #f2f2f7;
      border-style: solid;
      border-width: 0px 0px 1rpx 0px;

      &-info {
        & > text {
          display: -webkit-box;
          /* 设置为WebKit内核的弹性盒子模型 */
          overflow: hidden;
          /* 隐藏超出范围的内容 */
          font-size: 27rpx;
          font-weight: normal;
          line-height: normal;
          color: #1a1a1a;
          text-overflow: ellipsis;
          /* 使用省略号 */
          letter-spacing: 0em;
          -webkit-box-orient: vertical;
          /* 垂直排列 */
          -webkit-line-clamp: 2;
          /* 限制显示两行 */
        }

        .items {
          display: flex;
          gap: 24rpx;
          align-items: center;
          padding: 0;
          margin-top: 20rpx;
          font-family: PingFang SC;
          font-size: 24rpx;
          font-weight: normal;
          line-height: normal;
          color: #8c8c8c;
          letter-spacing: 0em;

          test {
            list-style: none;
          }
        }
      }

      image {
        width: 182rpx;
        min-width: 182rpx;
        height: 144rpx;
        border-radius: 8rpx;
      }
    }
  }
}
</style>
